<template>
  <div class="page-container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane name="deliveryNoteToBeConfirmed" label="待确认"></el-tab-pane>
      <el-tab-pane name="deliveryNoteConfirmed" label="已确认"></el-tab-pane>
    </el-tabs>

    <!--表格内容栏-->
    <cy-table
      :height="350"
      :highlightCurrentRow="true"
      :content="pageResult"
      :totalSize="totalSize"
      :columns="filterColumns"
      :showSelection="false"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :showEditOperation="false"
      :customLabel="customLabel"
      :showCustomOperation="customOperationStatus"
      @handleCustom="checkDelivery"
      @findPage="findPage"
      ref="CyTable"></cy-table>

    <!--审核弹窗-->
    <el-dialog title="交货单审核" top="7vh" width="50%" :visible.sync="checkDialogVisible" :close-on-click-modal="false">
      <el-form label-position="right" :size="size" :model="dataForm" :rules="dataFormRules" ref="dataForm" label-width="100px">
         <el-row class="searchDialog-input">
            <el-form-item label="转单审核：" prop="orderStatus">
          <el-select v-model="dataForm.orderStatus" placeholder="请选择审核状态" style="width: 100%;">
            <el-option label="通过" value="2"></el-option>
            <el-option label="拒绝" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="mark">
          <el-input v-model="dataForm.mark" type="textarea" label="请输入备注"></el-input>
        </el-form-item>
         </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="checkDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>
  import CyTable from '@/views/Core/ProductTable'
  import KtButton from '@/views/Core/KtButton'

  export default {
    components: {
      KtButton,
      CyTable,
    },

    data() {
      return {
        size: 'small',
        activeName: 'deliveryNoteToBeConfirmed',
        filters: {orderStatus: 1},
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: [],
        totalSize: 0,
        filterColumns: [
          {prop: 'orderNo', label: '转单号', minWidth: 120},
          {
            prop: 'orderStatus', label: '转单状态', minWidth: 80, formatter: function (row, column, cellValue) {
              if (cellValue == 1) {
                return '待确认'
              } else if (cellValue == 2) {
                return '已确认'
              }
            }
          },
          {prop: 'transferToMerchantId', label: '转入商家id', minWidth: 80},
          {prop: 'transferToMerchantName', label: '转入商家名称', minWidth: 120},
          {prop: 'transferOutMerchantId', label: '转出商家id', minWidth: 80},
          {prop: 'transferOutMerchantName', label: '转出商家名称', minWidth: 120},
          {prop: 'productPrice', label: '商品转单价格', minWidth: 80},
          {prop: 'productNum', label: '商品数量', minWidth: 80},
          {prop: 'mark', label: '备注', minWidth: 160},
          {prop: 'createTime', label: '备注时间', minWidth: 80},
        ],

        customLabel: '审核',                            // 自定义按钮名称
        customOperationStatus: true,                  // 自定义按钮掩藏
        checkDialogVisible: false,
        dataForm: {
          id: '',
          orderStatus: '',
          mark: ''
        },
        dataFormRules: {
          orderStatus: [{required: true, message: '请选择转单审核状态', trigger: 'change'}],
        }
      }
    },

    methods: {
      // tab 切换
      handleClick() {
        this.customOperationStatus = true
        switch (this.activeName) {
          case 'deliveryNoteToBeConfirmed': {
            this.filters.orderStatus = 1
            break
          }
          case 'deliveryNoteConfirmed': {
            this.customOperationStatus = false
            this.filters.orderStatus = 2
            break
          }
          default: {
            this.filters.orderStatus = 1
          }
        }
        this.findPage()
      },

      // 获取分页数据
      findPage: function (params) {
        let this_ = this
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          }
        }
        this_.filters.start = params.pageNum
        this_.filters.limit = params.pageSize
        this.utils.request.getOrderManualDelivery(this_.filters, function (res) {
          this_.pageResult = res.data.rows
          this_.totalSize = Number(res.data.total)
        })
      },

      // 审核
      checkDelivery(data) {
        this.checkDialogVisible = true
        this.dataForm = {
          id: '',
          orderStatus: '',
          mark: ''
        }
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate()
        }
        this.dataForm = Object.assign({}, data.row)
        this.dataForm.orderStatus = null
        this.dataForm.mark = null
        // this.dataForm.orderStatus = JSON.stringify(data.row.orderStatus)
      },

      // 手动转单提交
      submitForm() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            let this_ = this
            let params = Object.assign({}, this.dataForm)
            this.utils.request.updateOrderManualDelivery(params, function (data) {
              if (data.code == '0000') {
                this_.$message({message: '操作成功', type: 'success'})
                this_.checkDialogVisible = false
                this_.findPage()
              } else {
                this_.$message({message: '操作失败', type: 'error'})
              }
            })
          }
        })
      }

    }
  }
</script>

<style scoped lang="scss">
  /deep/ .el-tabs--border-card > .el-tabs__content {
    padding: 0;
  }

</style>
